<template>
    <div class="app">
        <!-- <h1>作业</h1>
        <el-row class="mb-4">
            <el-button>Default</el-button>
            <el-button type="primary">Primary</el-button>
            <el-button type="success">Success</el-button>
            <el-button type="info">Info</el-button>
            <el-button type="warning">Warning</el-button>
            <el-button type="danger">Danger</el-button>
        </el-row> -->
        <el-table :data="tableData" stripe style="width: 100%" border  >
            <el-table-column prop="goods_id" label="id" width="180" />
            <el-table-column prop="goods_name" label="商品名称" width="180" />
            <el-table-column prop="goods_price" label="商品价格" />
            <el-table-column prop="goods_count" label="商品数量" />
            <el-table-column prop="goods_img" label="商品图片" >
                <template #default="{row}">
                    <img :src="row.goods_img" width="200" height="200" />
                </template>
            </el-table-column>
            <el-table-column  label="操作" >
                <template #default="{row}" >
                    <el-button type="danger" link  @click="delRow(row.goods_id)" >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
    import { onMounted, ref } from 'vue';
    import axios from 'axios'

    const tableData = ref([])
    const getlist=async()=>{
        const {data:{ list}}=await axios.get('https://applet-base-api-t.itheima.net/api/cart')
        tableData.value = list
    }

    onMounted(async()=>{
        getlist()
    })

    const delRow=(id)=>{
        tableData.value=tableData.value.filter(item=>item.goods_id !== id)
    }


   
</script>

<style  scoped>
    .app{
        width: 980px;
        margin: 100px auto 0;
    }
</style>